<template name="birthPicker">
  <view class="birth-choose">
    <picker-view
      indicator-style="border-color:#f4eded;"
      style="width: 100%; height: 190upx;"
      :value="birthValue"
      @change="bindChange"
      mask-style="background:transparent"
    >
      <picker-view-column>
        <view
          v-for="(item,index) in birthPickerDate.years"
          :key="index"
          :class="item == birthPickerDate.year?'birth-selected':(item<birthPickerDate.year?'birth-up retract-left':'birth-down retract-left')"
          style="line-height: 34px;"
        >{{item}}年</view>
      </picker-view-column>
      <picker-view-column>
        <view
          v-for="(item,index) in birthPickerDate.months"
          :key="index"
          :class="item == birthPickerDate.month?'birth-selected':'birth-other'"
          style="line-height: 34px"
        >{{item}}月</view>
      </picker-view-column>
      <picker-view-column>
        <view
          v-for="(item,index) in birthPickerDate.days"
          :key="index"
          :class="item == birthPickerDate.day?'birth-selected':(item<birthPickerDate.day?'birth-down retract-right':'birth-up retract-right')"
          style="line-height: 34px"
        >{{gregorian==1?item+'日':item}}</view>
      </picker-view-column>
    </picker-view>
    <view v-if="USERINFO.isOperate" class="disabledMask"></view>
  </view>
</template>

<script>
import {
  initCalendar,
  bindBirthChange,
  changeGregorian
} from "@/common/utils/birth.js";
let app = getApp();
export default {
  props: ["initBirthday", "gregorian","USERINFO"],
  data() {
    return {
      birthPickerDate: {},
      birthValue: []
    };
  },
  created() {
    initCalendar(this, this.gregorian, this.initBirthday);
    setTimeout(() => {
      this.visible = true;
      this.getBirthday();
    }, 0);
  },
 
  methods: {
    bindChange(e) {
      bindBirthChange(e, this);
      this.getBirthday();
    },
    getBirthday() {
      if (this.gregorian == 1) {
        this.birthday =
          this.birthPickerDate.year +
          "年" +
          this.birthPickerDate.month +
          "月" +
          this.birthPickerDate.day+"日";
      } else {
        this.birthday =
          this.birthPickerDate.year +
          "年" +
          this.birthPickerDate.month +
          "月" +
          this.birthPickerDate.day;
      }
      this.$emit("birthdayChange", this.birthday);
    },
    changeGregorian(e) {
      changeGregorian(e, this).then((value) => {
        console.log(value)
        this.$emit("birthdayChange", value);
    })
  }
  }
}
</script>
<style>
/* 日期选择 */
.birth-choose {
  width: 580upx;
  margin: 75upx auto 0;
  text-align: center;
  position: relative;
  font-size: 30upx;
  line-height: 30upx;
  color: #8a959e;
}
.birth-selected {
  color: #ff6174;
  font-weight: bold;
}
.birth-other {
  color: #e2dede;
}
.birth-up {
  color: #e2dede;
  -webkit-transform: skew(-20deg); /* for Chrome||Safari */
  -ms-transform: skew(-20deg); /* for IE */
  -moz-transform: skew(-20deg); /* for Firefox */
  -o-transform: skew(-20deg); /* for Opera */
}
.retract-left {
  text-indent: 30upx;
}
.retract-right {
  text-indent: -30upx;
}
.birth-down {
  color: #e2dede;
  -webkit-transform: skew(20deg); /* for Chrome||Safari */
  -ms-transform: skew(20deg); /* for IE */
  -moz-transform: skew(20deg); /* for Firefox */
  -o-transform: skew(20deg); /* for Opera */
}

/* 不可用模板 */
.disabledMask {
  width: 100%;
  height: 200upx;
  background: transparent;
  position: absolute;
  top: 0;
}
</style>